<template>
  <main class="apply_store_wrapper">
    <!-- 头部背景 -->
    <div class="apply_headimg">
      <img :src="applyBackground || headerBg" />
    </div>
    <section class="apply_tip" v-if="!applyInfo">
        欢迎加入
      <span>{{shop_info.title}}</span>，请填写申请信息！
    </section>
    <div class="apply_wrapper">
      
      <div class="addurl_con">
        <ul class="list">
          <li class="clearfix list-item" v-if="store_title.display == 1">
            <label>
              <b v-show="store_title.must == 1" class="colorRed">*</b>
              {{store_title.name}}
            </label>
            <div class="w60 fr">
              <input
                type="text"
                placeholder="门店名称"
                v-model="store_title_val"
                class="textw"
                @blur="blurEvent()"
              />
            </div>
          </li>
          <li v-if="store_industry.display == 1" class="clearfix list-item" style="height:auto">
            <label class="title">
              <b v-show="store_industry.must == 1" class="colorRed">*</b>
              {{store_industry.name}}
            </label>
            <div class="w60 fr">
              <div class="store_industry clearfix">
                <input type="button" value="选择门店行业(可多次添加)" class="textw" @click="addBtn()"/>
                <div class="droplist-menu" v-show="isShowBtn">
                  <div class="checkbox-group">
                    <div class="dropdown dropdown1">
                      <p class="dropbtn" @click="selectFirstBtn()">{{selectItem.pname||'请选择'}}</p>
                      <div class="dropdown-content" v-show="showFirst" v-if="first_lists">
                        <span
                          v-for="(item, index) in first_lists"
                          :key="index"
                          class="fl"
                          @click="selectFirstItem(item)"
                        >{{item.title}}</span>
                      </div>
                    </div>
                    <div data-value class="dropdown dropdown2">
                      <p class="dropbtn" @click="selectCecondBtn()">{{selectItem.name||'请选择'}}</p>
                      <div class="dropdown-content" v-show="showSecond" v-if="second_lists">
                        <span
                          v-for="(item, index) in second_lists"
                          :key="index"
                          class="fl"
                          @click="selectSecondItem(item)"
                        >{{item.title}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="buttons clearfix">
                    <span class="fl btn-click" @click="enterAdd()">确定</span>
                    <span class="fl btn-close" @click="cancelAdd()">取消</span>
                  </div>
                </div>
              </div>
              <br />
              <div class="radio-group">
                <p v-for="(item, index) in selectItems" :key="index">
                  {{item.pname}} {{item.name}}
                  <span
                    class="store_industry_remove"
                    @click="deleteSelect(item.id,index)"
                  >删除</span>
                </p>
              </div>
            </div>
          </li>
          <li class="clearfix img_preview list-item autoHeight" v-if="store_img.display == 1">
            <label>
              <b v-show="store_img.must == 1" class="colorRed">*</b>
              {{store_img.name}}
            </label>
            <div class="up_img fr">
              <!-- TODO 上传门店图片 -->
              <SmallUploadImg ref="smallUploadImgStore" :maxLength="1"></SmallUploadImg>

            </div>
          </li>
          <li class="clearfix img_preview list-item autoHeight" v-if="store_business_license_img.display == 1">
            <label>
              <b v-show="store_business_license_img.must == 1" class="colorRed">*</b>
              {{store_business_license_img.name}}
            </label>
            <div class="up_img fr">
              <!-- TODO 上传营业执照图片 -->
              <SmallUploadImg ref="smallUploadImgStoreBusiness" :imageList="fileList" @changeImgList="changeImgList" :noShowImg="false" :isChangeStyle="isChangeStyle" :maxLength="5"></SmallUploadImg>
            </div>
          </li>
          <li class="clearfix img_preview list-item autoHeight" v-if="fileList.length > 0 && store_business_license_img.display == 1">
            <div class="more-img">
              <div v-for="(item,index) in fileList" :key="index" @click="ImagePreviewShow(index)">
                <img class="delete-img" @click.stop="deleteImg(index)" src="https://img.wifenxiao.com/h5-wfx/images/deleteImg.png">
                <img :src="item" class="noBg" alt="">
              </div>
            </div>
          </li>
          <li class="clearfix list-item" v-if="store_user.display == 1">
            <label>
              <b v-show="store_user.must == 1" class="colorRed">*</b>
              {{store_user.name}}
            </label>
            <div class="w60 fr">
              <input
                type="text"
                placeholder="请输入您的真实姓名"
                v-model="store_user_val"
                class="textw"
                @blur="blurEvent()"
              />
            </div>
          </li>
          <li class="clearfix list-item" v-if="store_user_mobile.display == 1">
            <label>
              <b v-show="store_user_mobile.must == 1" class="colorRed">*</b>
              {{store_user_mobile.name}}：
            </label>
            <div class="w60 fr">
              <input
                type="text"
                v-model="store_user_mobile_val"
                placeholder="请输入您的手机号码"
                class="textw"
                @blur="blurEvent()"
              />
            </div>
          </li>
          <li class="clearfix list-item" v-if="store_mobile.display == 1">
            <label>
              <b v-show="store_mobile.must == 1" class="colorRed">*</b>
              {{store_mobile.name}}
            </label>
            <div class="w60 fr">
              <input
                type="text"
                placeholder="固定电话"
                v-model="store_mobile_val"
                class="textw"
                @blur="blurEvent()"
              />
            </div>
          </li>
          <li
            class="clearfix list-item"
            style="position:relative"
            v-if="check_apply_mobile == 1 && store_user_mobile.must == 1"
          >
            <label>
              <b class="colorRed">*</b>验证码
            </label>
            <div class="w60 fr">
              <input
                type="text"
                placeholder="填写验证码"
                class="textw textw_code fl"
                v-model="code"
                @blur="blurEvent()"
              />
              <img
                :src="verifyImg"
                class="verify-img"
                @click="refreshVerify"
              />
            </div>
          </li>
          <li
            class="clearfix list-item"
            style="position:relative"
            v-if="check_apply_mobile == 1 && store_user_mobile.must == 1"
          >
            <label>
              <b class="colorRed">*</b>短信验证码
            </label>
            <div class="w60 fr">
              <input
                type="text"
                placeholder="填写短信验证码"
                v-model="vcode"
                class="textw textw_code fl"
                @blur="blurEvent()"
              />
              <a class="setpwd_but" href="javascript:;" @click="refreshmsgVerify" style="right: 0">{{msgVerifyTxt}}</a>
            </div>
          </li>
          <li class="clearfix list-item" v-if="store_address.display == 1">
            <label>
              <b v-show="store_address.must == 1" class="colorRed">*</b>
              {{store_address.name}}
            </label>
            <div class="w60 fr">
              <small-area-picker class="area-picker" @procityareaInfo="procityareaInfo"></small-area-picker>
            </div>
          </li>
          <li class="clearfix list-item" v-if="store_address.display == 1">
            <label>
              <b v-show="store_address.must == 1" class="colorRed">*</b>详细地址
            </label>
            <div class="w60 fr">
              <input
                type="text"
                v-model="address"
                placeholder="请输入您的详细地址"
                class="textw"
                @blur="blurEvent()"
              />
            </div>
          </li>
          <li
            class="clearfix list-item"
            v-if="store_longitude.display == 1 || store_latitude.display == 1"
          >
            <label>
              <b v-show="store_longitude.must == 1" class="colorRed">*</b>获取经纬度
            </label>
            <div class="w60 fr">
              <span class="j-store-location" @click="getCoordinate()">{{getCoordinateBtn}}</span>
            </div>
          </li>
          <li class="clearfix list-item" v-if="store_longitude.display == 1">
            <label>
              <b v-show="store_longitude.must == 1" class="colorRed">*</b>
              {{store_longitude.name}}
            </label>
            <div class="w60 fr">
              <input
                type="text"
                placeholder="经度"
                v-model="store_longitude_val"
                class="textw"
                @blur="blurEvent()"
              />
            </div>
          </li>
          <li class="clearfix list-item" v-if="store_latitude.display == 1">
            <label>
              <b v-show="store_latitude.must == 1" class="colorRed">*</b>
              {{store_latitude.name}}
            </label>
            <div class="w60 fr">
              <input
                type="text"
                placeholder="纬度"
                v-model="store_latitude_val"
                class="textw"
                @blur="blurEvent()"
              />
            </div>
          </li>
          <li class="clearfix list-item storePS" v-if="store_distribution.display == 1">
            <label>
              <b v-show="store_distribution.must == 1" class="colorRed">*</b>
              {{store_distribution.name}}
            </label>
            <div class="w60 fr">
              <van-radio-group
                icon-size="16" color="#CCCCCC" checked-color="#F20B22" direction="horizontal"
                v-model="store_distribution_val">
                <van-radio name="1">是</van-radio>
                <van-radio name="2">否</van-radio>
              </van-radio-group>
            </div>
          </li>
          <li class="clearfix list-item" v-if="store_link.display == 1">
            <label>
              <b v-show="store_link.must == 1" class="colorRed">*</b>
              {{store_link.name}}
            </label>
            <div class="w60 fr">
              <input
                type="text"
                placeholder="店铺链接"
                v-model="store_link_val"
                class="textw"
                @blur="blurEvent()"
              />
            </div>
          </li>
          <li class="clearfix list-item" v-for="(item, index) in newExtraConfig" :key="index">
            <label>
              <b v-show="item.must == 1" class="colorRed">*</b>
              {{item.name}}
            </label>
            <div class="w60 fr">
              <input
                type="text"
                @blur="blurEvent()"
                :placeholder="item.name"
                v-model="diySend[item.key]"
                class="textw"
              />
            </div>
          </li>
        </ul>
        <section class="mlogin_but" @click="onSubmit()">
          <a href="javascript:;" class="J-addApply">
            <i class="ture"></i>
            <span v-if="need_apply_agreement == 1">同意协议并申请</span>
            <span v-else>确定</span>
          </a>
        </section>
        <section v-if="(need_apply_agreement == 1 && apply_agreement) || contract_documents">
          <div class="agreenment">
            <van-checkbox v-model="agree" checked-color="#F21228" icon-size="16px">
              我已阅读并同意
              <span
                v-if="need_apply_agreement == 1 && apply_agreement"
                class="J-showAgreement3-title"
                @click="showAgreement"
              >《门店申请协议》</span>
              <a
                v-if="contract_documents"
                @click="downloadDoc(contract_documents)"
                download="门店合同"
                class="j-download"
              >
                <span>《门店合同》</span>
              </a>
            </van-checkbox>
          </div>
        </section>
        <div
          class="apply_agreement"
          v-if="need_apply_agreement == 1 && apply_agreement"
          v-show="agree"
        >
          <h3>协议正文</h3>
          <section class="txt" v-html="apply_agreement"></section>
        </div>
      </div>
    </div>
    
    <map-area :visible.sync="showAreaPop" @onSelect="handleConfirm"></map-area>
    <share-btn v-if="application_poster_switch" type="4"></share-btn>
  </main>
</template>

<script>
/* eslint-disable */

import mapArea from '@/components/mapArea'
import shareBtn from '../../component/shareBtn'
import { TMap } from '@/utils/map'
import { getVerify } from '@/api/loginRegister/index'
import { validLength, validateMobile } from '@/utils/validate'
import {
  getStoreApplyList,
  doStoreApply
} from '@/api/identityApplication/identityApplication'
import { postMsgVerify } from '@/api/loginRegister/index'
import { uploadImgs } from '@/api/community/article'
import { isIOS } from '@/utils/validate'
import { base64_encode } from '@/utils/index'
import { openPage } from '@/utils/utils'
import SmallUploadImg from '@/components/SmallUploadImg'
import SmallAreaPicker from '@/components/smallAreaPicker/smallareapicker.vue'


import Vue from 'vue'
import { Popup, Checkbox, Uploader } from 'vant'
import { RadioGroup, Radio } from 'vant'

Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Popup)
  .use(Checkbox)
  .use(Uploader)
export default Vue.extend({
  name: 'common',
  components: {
    mapArea,
    SmallUploadImg,
    SmallAreaPicker,
    shareBtn
  },
  data() {
    return {
      headerBg: 'https://img.wifenxiao.com/h5-wfx/images/store_apply_head.jpg', // 默认头部图片
      applyBackground: null, // 头部图片
      applyInfo: null,
      verifyImg: '', // 图形验证码
      msgVerifyTxt: '获取验证码',
      user_id: '',
      shop_info: {
        title: ''
      },
      getCoordinateBtn: '点击获取经纬度',
      store_title: {},
      store_title_val: '',
      store_industry: {},
      selectItem: {},
      selectItems: [],
      store_industry_ids: [],
      store_img: {},
      store_img_src: '',
      store_user: {},
      store_user_val: '',
      store_user_mobile: {},
      store_user_mobile_val: '',
      store_mobile: {},
      store_mobile_val: '',
      store_address: {},
      address: '',
      store_longitude: {},
      store_longitude_val: '',
      store_latitude: {},
      store_latitude_val: '',
      store_distribution: {},
      store_distribution_val: '2',
      store_link: {},
      store_link_val: '',
      code: '',
      vcode: '',
      first_lists: [],
      all_second_lists: [],
      second_lists: [],
      isShowBtn: false, // 添加行业按钮
      showFirst: false, // 一级行业
      showSecond: false, // 二级行业
      showAreaPop: false, // 添加地址
      check_apply_mobile: '',
      last_address: {},
      extra_config: [],
      need_apply_agreement: 0,
      apply_agreement: 0,
      contract_documents: '',
      agree: true,
      diySend: {},
      application_poster_switch: 0,
      fileList: [],
      store_business_license_img: {},
      isChangeStyle: false
    }
  },
  watch: {},
  methods: {
    // ios手机端失去焦点时复原页面
    blurEvent() {
      if (this.isIos) {
        const scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop || 0
        window.scrollTo(0, scrollHeight + 1)
      }
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      getStoreApplyList().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.applyBackground = res.data.apply_background
          this.shop_info = res.data.shop_info
          this.store_title = res.data.apply_config.store_title
          this.store_industry = res.data.apply_config.store_industry
          this.store_img = res.data.apply_config.store_img
          this.store_business_license_img = res.data.apply_config.store_business_license_img
          this.store_user = res.data.apply_config.store_user
          this.store_user_mobile = res.data.apply_config.store_user_mobile
          this.store_mobile = res.data.apply_config.store_mobile
          this.store_address = res.data.apply_config.store_address
          this.store_longitude = res.data.apply_config.store_longitude
          this.store_latitude = res.data.apply_config.store_latitude
          this.store_distribution = res.data.apply_config.store_distribution
          this.store_link = res.data.apply_config.store_link
          this.first_lists = res.data.first_lists || []
          this.all_second_lists = res.data.second_lists || []
          this.check_apply_mobile = res.data.other_config.check_apply_mobile
          this.last_address = res.data.last_address
          this.extra_config = res.data.extra_config || []
          this.need_apply_agreement = res.data.need_apply_agreement
          this.contract_documents = res.data.contract_documents
          this.apply_agreement = res.data.other_config.apply_agreement
          this.application_poster_switch = res.data.application_poster_switch

          this.doDiySend()
          if (res.data.other_config.apply_head_title) {
              wx.setNavigationBarTitle({
                title: res.data.other_config.apply_head_title
              })
          }
        } else {
          this.$Error(res.msg)
          if (res.data.jump_url) {
            setTimeout(() => {
              openPage(res.data.jump_url)
            }, 1000)
          }
        }
      })
    },
    doDiySend() {
      this.newExtraConfig.map(val => {
        this.diySend[val.key] = ''
      })
    },
    // 添加行业
    addBtn() {
      this.isShowBtn = !this.isShowBtn
    },
    // 行业选择
    selectFirstBtn() {
      this.showFirst = !this.showFirst
    },
    selectFirstItem(item) {
      // console.log(item)
      const data = {
        id: item.industry_id,
        pid: '',
        pname: item.title
      }
      this.selectItem = data
      this.doSecondData(data.id)
      this.showFirst = false
      this.showSecond = false
    },
    selectCecondBtn() {
      this.showSecond = !this.showSecond
      this.showFirst = false
    },
    selectSecondItem(item) {
      // console.log(item)
      const data = {
        id: item.industry_id,
        pid: item.parent_id,
        name: item.title,
        pname: item.p_name
      }
      this.selectItem = data
      this.showSecond = false
    },
    doSecondData(id) {
      const data = []
      this.all_second_lists.map(val => {
        if (val.parent_id == id) {
          data.push(val)
        }
      })
      this.second_lists = data
    },
    enterAdd() {
      // 是否选择
      if (!this.selectItem.id) {
        this.$Error('请选择门店行业')
        return false
      }
      // 判断是否已存在当前所选行业的下级或者上级行业
      if (!this.selectItem.pid) {
        const idx = this.selectItems.findIndex(val => {
          return val.pid == this.selectItem.id
        })
        if (~idx) {
          this.$Error('请删除该行业的下级行业后再选择')
          return false
        }
      } else {
        const idx = this.selectItems.findIndex(val => {
          return val.id == this.selectItem.pid
        })
        if (~idx) {
          this.$Error('请删除该行业的上级行业后再选择')
          return false
        }
      }
      const idx = this.store_industry_ids.findIndex(val => {
        return val == this.selectItem.id
      })
      if (!~idx) {
        this.store_industry_ids.push(this.selectItem.id)
        this.selectItems.push(this.selectItem)
        this.isShowBtn = false
      } else {
        this.$Error('请不要重复添加')
      }
    },
    deleteSelect(id, idx) {
      this.selectItems.splice(idx, 1)
      this.store_industry_ids.splice(idx, 1)
    },
    cancelAdd() {
      this.isShowBtn = false
      this.showFirst = false
      this.showSecond = false
    },
    // 点击调用地址选择
    clickAddr() {
      this.showAreaPop = true
    },
    
    confirm(val) {
      // console.log(val)
      this.showAddr = false
      const newAddr = {
        province_name: val[0].name,
        province_id: val[0].code,
        city_name: val[1].name,
        city_id: val[1].code,
        area_name: val[2].name,
        area_id: val[2].code
      }
      this.last_address = newAddr
    },

    //小程序选择省市区
    procityareaInfo(val) {
      this.handleConfirm(val)
    },
  
    // 点击调用地址选择
    selectAddress() {
      this.showAreaPop = true
    },
    // 确认
    handleConfirm(val) {
      if (!val.province_id || !val.city_id) {
        this.$Error('请选择完整的省市县')
      } else {
        this.showAreaPop = false
        const newAddr = {
          province_name: val.province_name,
          province_id: val.province_id,
          city_name: val.city_name,
          city_id: val.city_id,
          area_name: val.area_name,
          area_id: val.area_id
        }
        this.last_address = newAddr
      }
    },
    
    
    // 获取坐标
    getCoordinate() {
        const lng = 0
        const lat = 0
        // 小程序获取当前定位
          wx.getLocation({
            type:'gcj02',
            success: res => {
              // console.log(res)
              const lat = res.latitude
              const lng = res.longitude
              // console.log(typeof lat)
              this.store_longitude_val = lng.toFixed(5)
              this.store_latitude_val = lat.toFixed(5)
              this.getCoordinateBtn = '重新获取经纬度'
            },
            error: res => {
              this.$Error(`微信获取定位失败!${res}`)
            }
          })
    },
    // 协议
    showAgreement() {
      this.agree = !this.agree
    },
    changeImgList(list) {
      this.fileList = list ? list : []
      if (this.fileList.length < 5) {
        this.isChangeStyle = true
      } else {
        this.isChangeStyle = false
      }
    },
    /**
     * 预览图片
     */
    ImagePreviewShow(current) {
      wx.previewImage({
        current,
        urls: this.fileList
      })
    },
    deleteImg(index) {
      this.fileList.splice(index, 1)
    },
    // 提交
    onSubmit() {
      // 门店名称
      if (this.store_title.display == 1 && this.store_title.must == 1) {
        if (!this.store_title_val) {
          this.$Error(this.store_title.name + '不能为空')
          return false
        }
      }
      // 门店行业
      if (this.store_industry.display == 1 && this.store_industry.must == 1) {
        if (this.selectItems.length == 0) {
          this.$Error(this.store_industry.name + '不能为空')
          return false
        }
      }
      // 门店图片
      // TODO 上传
        this.store_img_src=this.$refs.smallUploadImgStore?this.$refs.smallUploadImgStore.imgList[0]:''
      if (this.store_img.display == 1 && this.store_img.must == 1) {
        if (!this.store_img_src) {
          this.$Error(this.store_img.name + '不能为空')
          return false
        }
      }
      // 营业执照
      if (this.store_business_license_img.display == 1 && this.store_business_license_img.must == 1) {
        if (this.fileList.length == 0) {
          this.$Error(this.store_business_license_img.name + '不能为空')
          return false
        }
      }
      // 联系人
      if (this.store_user.display == 1 && this.store_user.must == 1) {
        if (!this.store_user_val) {
          this.$Error(this.store_user.name + '不能为空')
          return false
        }
      }
      //  手机号码
      if (
        this.store_user_mobile.display == 1 &&
        this.store_user_mobile.must == 1
      ) {
        if (!this.store_user_mobile_val) {
          this.$Error(this.store_user_mobile.name + '不能为空')
          return false
        }
        const reg_card = /^1[3456789]\d{9}$/gi
        if (!reg_card.test(this.store_user_mobile_val)) {
          this.$Error(this.store_user_mobile.name+'有误,请检查后提交')
          return false
        }
      }
      // 固话
      if (this.store_mobile.display == 1 && this.store_mobile.must == 1) {
        if (!this.store_mobile_val) {
          this.$Error(this.store_mobile.name + '不能为空')
          return false
        }
      }
      // 验证码
      if (
        this.check_apply_mobile == 1 &&
        this.store_user_mobile.display == 1 &&
        this.store_mobile.must == 1
      ) {
        if (!this.vcode) {
          this.$Error('短信验证码不能为空')
          return false
        }
      }
      // 地址
      if (this.store_address.display == 1 && this.store_address.must == 1) {
        if (!this.last_address.province_id) {
          this.$Error(this.store_address.name + '不能为空')
          return false
        }
        if (!this.address) {
          this.$Error('详细地址不能为空')
          return false
        }
      }
      // 经度
      if (this.store_longitude.display == 1 && this.store_longitude.must == 1) {
        if (!this.store_longitude_val) {
          this.$Error(this.store_longitude.name + '不能为空')
          return false
        }
      }
      // 纬度
      if (
        this.store_latitude_val.display == 1 &&
        this.store_latitude_val.must == 1
      ) {
        if (!this.store_latitude_val) {
          this.$Error(this.store_latitude_val.name + '不能为空')
          return false
        }
      }
      // 店铺链接
      if (this.store_link.display == 1 && this.store_link.must == 1) {
        if (!this.store_link_val) {
          this.$Error(this.store_link.name + '不能为空')
          return false
        }
        const reg_url = /^((https?|ftp):\/\/)?([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/gi
        if (!reg_url.test(this.store_link_val)) {
          this.$Error('店铺链接有误,请检查后提交')
          return false
        }
      }
      // 自定义项
      const item = this.newExtraConfig.find(val => {
        if (val.display == 1 && val.must == 1) {
          return this.diySend[val.key] == ''
        }
      })
      if (item) {
        this.$Error(item.name + '不能为空')
        return false
      }
      // 协议
      if (!this.agree) {
        this.$Error('请接受协议再提交申请')
        return false
      }

      this._doStoreApply()
    },
    _doStoreApply() {
      const data = {
        store_title: this.store_title_val,
        store_user: this.store_user_val,
        store_industry_ids: this.store_industry_ids.join(','),
        store_img: this.store_img_src,
        store_business_license_img: this.fileList,
        store_user_mobile: this.store_user_mobile_val,
        store_mobile: this.store_mobile_val,
        province_id: this.last_address ? this.last_address.province_id : '',
        city_id: this.last_address ? this.last_address.city_id : '',
        area_id: this.last_address ? this.last_address.area_id : '',
        store_address: this.address,
        store_longitude: this.store_longitude_val,
        store_latitude: this.store_latitude_val,
        store_link: this.store_link_val,
        store_distribution: this.store_distribution_val,
        vcode: this.vcode,
        code: this.code,
        user_id: this.$route.query.pid
      }
      const allData = Object.assign(data, this.diySend)
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      doStoreApply(allData).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.$Error('申请成功')
          setTimeout(() => {
            openPage(res.jump_url)
          }, 1000)
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 刷新验证码
    refreshVerify() {
      getVerify().then((res) => {
        const src = `data:image/jpg;base64,${base64_encode(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
        this.verifyImg = src
      })
    },
    // 获取验证码倒计时
    setTimeoutVerify() {
      let count = 60
      this.msgVerifyTxt = count + '秒后重新获取'
      const timer = setInterval(() => {
        this.msgVerifyTxt = count + '秒后重新获取'
        if (count <= 0) {
          this.msgVerifyTxt = '获取验证码'
          clearInterval(timer)
        }
        count--
      }, 1000)
    },
    // 获取短信验证码
    refreshmsgVerify() {
      if (this.msgVerifyTxt == '获取验证码') {
        const mobile = this.store_user_mobile_val
        const code = this.code
        if (validateMobile(mobile)) {
          if (validLength(code)) {
            const data = { mobile, code }
            postMsgVerify(data).then(res => {
              if (res.status === 1) {
                this.setTimeoutVerify()
                // console.log(res)
              } else {
                this.$Error(res.msg)
              }
            })
          } else {
            this.$Error('请输入验证码')
            return false
          }
        } else {
          this.$Error('请输入正确的手机号码')
          return false
        }
      }
    },
    /**
     * 上传图片
     */
    afterRead(file) {
      const form = new FormData()
      form.append('file', file.file)
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      uploadImgs(form)
        .then(res => {
          this.$loadingWrap.close()
          if (res.status === 1) {
            this.store_img_src = res.data.pic_url
          } else {
            this.$Error('上传失败, 请重新上传')
          }
        })
        .catch(() => {
          this.$Error('上传失败, 请重新上传')
        })
    },
    // 下载合同
    downloadDoc(url){
        wx.downloadFile({
          url: url,
          success: function (res) {
            let fileType = url.substring(url.lastIndexOf(".")+1);
            if(fileType.indexOf('@') !== -1) {
              fileType = fileType.substring(0, fileType.indexOf('@'));
            }
            const tempPath = res.tempFilePath;
            const imgType = "|png|gif|jpg|jpeg|";
            if(imgType.indexOf(fileType)>0) {
              wx.saveImageToPhotosAlbum({      
                filePath: tempPath,
                success(res) {
                  // console.log('保存成功');
                  wx.showToast({
                    title: '保存成功',
                    icon: 'success',
                    duration: 2000
                  })
                },
                fail: function(err) {
                  if(err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
                    wx.showModal({
                      title: '提示',
                      content: '需要您授权保存相册',
                      showCancel: false,
                      success: modalSuccess => {
                        wx.openSetting({
                          success(settingdata) {
                            if (settingdata.authSetting['scope.writePhotosAlbum']) {
                              // console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                            }else {
                              // console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                            }
                          }
                        })
                      }
                    })
                  }
                }
              })
            } else {
              wx.saveFile({
                tempFilePath: tempPath, 
                success:function(res){
                  const savePath = res.savedFilePath;
                  wx.openDocument({
                    filePath: savePath,
                    fileType: fileType,
                    showMenu: true,
                    success :function(res){
                      // console.log('打开文档成功')
                    },
                  });
                },
                fail: function (err) {
                  // console.log('保存失败：', err)
                }
              })
            }
          }
        })

    },
  },
  computed: {
    isWX() {
      return isWeixinCient()
    },
    isIos() {
      return isIOS()
    },
    getAddrText() {
      if (this.last_address) {
        if (
          this.last_address.province_name ||
          this.last_address.city_name ||
          this.last_address.area_name
        ) {
          return `${this.last_address.province_name} ${this.last_address.city_name} ${this.last_address.area_name}`
        } else {
          return '点击选择'
        }
      } else {
        return '点击选择'
      }
    },
    newExtraConfig() {
      const data = []
      this.extra_config.map(val => {
        if (val.display == 1 && val.name) {
          data.push(val)
        }
      })
      return data
    }
  },
  created() {
    TMap()
    this.init()
    this.refreshVerify()
  }
})
</script>

<style lang="scss">
@import 'src/styles/identityApplication/index.scss';
.apply_store_wrapper {
  .apply_headimg {
    width: 100%;
    height: 250px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .apply_tip {
      padding: 20px 25px;
      color: #666;
      font-size: 28px;
      span {
        color: #F21228;
        font-size: 30px;
        font-weight: 700;
        padding: 0 2px;
      }
    }
  .apply_wrapper {
    width: calc(100% - 50px);
    margin: 0px 25px;
    padding: 0 25px;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: #fff;
    overflow: hidden;
    
    .addurl_con {
      position: relative;
      background: #fff;
      z-index: 0;
      overflow-y: initial;
      font-size: 28px;
      .list {
        border-top: #f3f3f3 solid 0.5px;
        margin-bottom: 32px;
        &-item {
          em {
            float: left;
            width: 3%;
            color: #333;
            font-size: 28px;
          }
          .textw {
            color: #757575;
            &::placeholder {
              color: #757575;
            }
          }
          .w60 {
            width: 68%;
          }
          &.storePS{
            .van-radio{
              display: inline-flex;
              margin-top: 30px;
            }
            label{
              width:46%;
            }
            .w60{
              width:54%;
            }
          }
          .store_industry {
            float: left;
            position: relative;
            width: 100%;
            height: 100%;
            .textw {
              width: 100%;
              text-align: right;
              padding: 0;
            }
            .droplist-menu {
              .checkbox-group {
                display: flex;
                .dropdown {
                  position: relative;
                  width: 170px;
                  &:nth-child(1) {
                    margin-right: 10px;
                  }
                  .dropbtn {
                    background: #fff;
                    padding: 8px;
                    width: 166px;
                    line-height: 40px;
                    text-align: center;
                    border: 2px solid #ccc;
                    border-radius: 6px;
                  }
                  .dropdown-content {
                    position: absolute;
                    z-index: 1000;
                    border: 2px solid #ccc;
                    background-color: #fff;
                    width: 166px;
                    max-height: 600px;
                    box-sizing: border-box;
                    overflow: scroll;
                    span {
                      color: #333;
                      padding: 16px 0;
                      margin: 0 18px;
                      width: 140px;
                      text-decoration: none;
                      line-height: 24px;
                      border-bottom: 2px solid #f3f3f3;
                    }
                  }
                }
              }
              .buttons {
                padding: 26px 0;
                span {
                  padding: 4px 16px;
                  line-height: 40px;
                  border-radius: 6px;
                  border: 2px solid #ccc;
                  cursor: pointer;
                  box-sizing: border-box;
                  margin-right: 10px;
                }
                .btn-click {
                  color: #fff;
                  background-color: #F21228;
                  border: 1px solid #F21228;
                }
              }
            }
          }
          .radio-group {
            width: 100%;
            height: auto;
            float: right;
            border: 0;
            p {
              margin-left: 37%;
              color: #333;
              line-height: 40px;
              padding: 8px 0;
              border-bottom: #f3f3f3 dashed 2px;
              span {
                float: right;
                line-height: 40px;
                color: #F21228;
                cursor: pointer;
              }
            }
          }
          .up_img {
            width: 160px;
            text-align: right;
          }
          .j-store-location {
            display: inline-block;
            height: 60px;
            line-height: 60px;
            margin-top: 14px;
            padding: 0 12px;
            border-radius: 6px;
            background: #F21228;
            color: #fff;
          }
        }
        .autoHeight{
          height: auto!important;
        }
      }
      .agreenment {
        display: flex;
        justify-content: center;
        color: #666;
        span {
          color: #F21228;
        }
      }
      .apply_agreement {
        display: block;
        h3 {
          text-align: center;
          font-weight: 700;
          line-height: 40px;
          padding-top: 18px;
          font-size: 28px;
        }
        .txt {
          font-size: 24px;
          word-wrap: break-word;
          word-break: break-all;
          padding: 20px 16px;
          overflow-x: auto;
        }
      }
    }
    .area-picker{
      padding:32px 30px;
      color:#666;
    }
  }
  .verify-img {
    width: 32%;
    height: 70px;
    position: absolute;
    right: 0px;
    display: inline-block;
    margin-top: 5px;
  }
}
.more-img {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  border: none;
  background: transparent;
  height: auto;
  text-align: center;
  color: #000;
  div {
    position: relative;
    width: 156px;
    height: 156px;
    margin-top: 20px;
    .delete-img {
      position: absolute;
      width: 28px;
      height: 28px;
      right: 0;
      top: 0;
    }
    img.noBg {
      margin-left: 10px;
    }
  }
}
</style>
